<template>

  <section id="voucherList"  class="voucher-list">

    <router-link :to="{path : '/voucher/exchange'}" class="text-center exchange-btn">
      <h5><i class="iconfont icon-exchange-add exchange-icon"></i>兑换代金券</h5>
    </router-link>

    <banner :imgList="imgList"  :ratio="3.60" />

    <ul class="voucher-array">
        <li  @click="select(voucher);" class="voucher-array-item fx-row fx-row-center" v-for="(voucher,index) in voucherList" :key="index">
          <h5 class="voucher-price" :class="[voucher.state == 0 ? 'active' : '']">
            ¥ {{voucher.couponPrice}}
          </h5>
          <div class="img-ve-dotted-line"></div>
          <div class="voucher-content fx">
              <h5 class="text-ellipsis voucher-name">{{voucher.couponName}}</h5>
              <p class="voucher-desc">
                {{voucher.comment}}
              </p>
              <p class="voucher-time">
                {{voucher.startTime | date('yyyy-MM-dd')}} 至  {{voucher.endTime | date('yyyy-MM-dd')}}
              </p>
          </div>

          <div class="voucher-status" :class="[voucher.state == 2 ? 'img-voucher-expire' :  voucher.state == 1 ? 'img-voucher-use' : 'img-voucher-not-use']">
          </div>

        </li>
    </ul>


  </section>
</template>
<style lang="scss" scoped>
  @import "../css/voucherList";
</style>

<script type="text/javascript" src="../js/voucherList"></script>


